<template>
    <div class="login">
        登录页面
    </div>
    <table cellspacing="0" class="table" border="1">
        <thead>
            <tr>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody >
            <tr :key="item.id" v-for="item in data">
                <td>{{ item.name }}</td>
                <td>{{ item.price}}</td>
                <td>
                    <button @click="toDetail(item)">详情</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
import { data } from './list.json'
import {useRouter} from 'vue-router'

// console.log(data)

const router = useRouter()

type Item = {
  name: string;
  price: number;
  id: number;
}

const toDetail = (item:Item)=>{
    router.push({
        // path:'/reg',
        // query:item // 只能接受对象 第一种传参方式，必须path
        name:"Reg",
        // params:item  // 第二种方式，必须name，存在内存
        params:{
            id:item.id
        }
    }) 
}

</script>
<style lang="less">
.login{
    width: 300px;
    height: 20px;
    background: green;
}
.table{
    width: 400px;
    text-align: center;
}
</style>